<template>
  <div>
    <van-nav-bar title="黑马头条-登录" :fixed="true" placeholder/>
    <van-form @submit="onSubmit">
        <!-- Field 表单中的输入框组件。 -->
        <!-- 设置 required 属性表示这是一个必填项，可以配合 error 或 error-message 属性显示对应的错误提示。 -->
        <!-- name ：名称，提交表单的标识符 -->
        <!-- required ：是否显示表单必填星号 -->
        <!-- pattern :通过正则表达式进行校验 -->
        <!-- trigger :本项规则的触发时机，可选值为 onChange、onBlur -->
      <van-field
        v-model="mobile"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        required
        :rules="[{ pattern:/^1[3-9]\d{9}$/ ,required: true, message: '手机号格式不正确' ,trigger: 'onChange'}]"
      />
      <van-field
        v-model="code"
        type="password"
        name="验证码"
        label="验证码"
        placeholder="请输入验证码"
        required
        :rules="[{pattern: /^\d{6}$/, required: true, message: '请填写6位验证码',trigger: 'onChange' }]"
      />
      <div style="margin: 16px">
          <!-- loading : 是否显示为加载状态 -->
          <!-- native-type : 原生 button 标签的 type 属性 -->
        <van-button
        round
        block
        type="info"
        native-type="submit"
        :disabled="islogin"
        loading-text="加载中..."
        :loading="islogin"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// 实现任何需求
// 1、铺设页面（html+css）
// 2、铺设数据（修改数据）
// 3、交互功能
// 4、调用后台接口

// 目标：登录页面
// 1、views/login/index.vue -给框
// 2、配置到 router/index.js 里
// 3、App.vue - router-view 挂载点

// 目标：头部导航
// 1、明确需求，复制组件过来，剔除无用的
// 2、在修改，改标题内容，改背景颜色，字体颜色
// 3、查文档 -> 定制样式
// 4、babel.config.js 里配置
// 5、vue.config.js 里配置 cover.less 文件的绝对地址

// 目标： 登录表单-铺设-校验
// 1、找到表单van-form 整体复制过来
// 2、查看属性意思，相应修改
// 3、寻找红色小星星，required 属性
// 4、v-model 绑定 form 对象属性和输入框值
// 5、field 里 rules 设置校验规则

// 目标：测试登录功能
// vant 组件 不同于 element-ui,vant 组件的 van-form 遇到提交时，会自己校验每个表单里的规则，不通过，就不执行submit 事件的方法
// 可以用 this.form / values 都是参数名和值

// 目标：登录接口调用
// 1、api里，看接口，编写接口方法
// 2、在 login/index.vue 中，引入，在submit 函数中使用，传入收集到的form 对象里参数名和值
// 3、之后，拿到token.js 工具，直接把token 存入本地（不用存vuex里）
// 4、Notify 通知，给用户反馈，vant 组件（有的可以用函数影视调用，有的也可以用组件形式来调用，具体要看文档）

// 目标：（优化）防止用户频繁点击按钮
// 1、按钮身上，禁用属性，网络请求开始，开启禁用，请求成功/失败，关闭禁用
// 2、同事，加载状态提示用户 loading,loading-text
import { loginAPI } from '@/api'
import { setToken } from '@/utils/token'
import { Notify } from 'vant'
export default {
  data () {
    return {
      mobile: '13888888888', // 13888888888
      code: '246810', // 246810
      islogin: false // 按钮默认禁用
    }
  },
  methods: {
    // 登录点击事件
    async onSubmit (values) {
      this.islogin = true // 点击时禁用
      // values 收集每个表单 name 属性名和表单对应的值形成一个大对象
      //   console.log('submit', values)
      try {
        const res = await loginAPI({
          mobile: this.mobile,
          code: this.code
        //    mobile: this.form.mobile,
        //   code: this.form.code
        //   ...this.form
        })
        console.log(res)
        setToken(res.data.data.token)
        // 成功通知
        Notify({ type: 'success', message: '登录成功' })
        this.islogin = false // 解除禁用
        this.$router.push({
          path: '/layout'
        })
      } catch (err) {
        console.error(err)
        Notify({ type: 'danger', message: '登录失败' })
        this.islogin = false // 解除禁用
      }
    }
  }
}
</script>

<style>
</style>
